<template>
  <div class="text-filter" @click.stop>
    <div class="filter__text">文本</div>
    <div class="text-container">
      <select class="condition-selector" v-model="condition" @change="handleSelectChange">
        <option class="option-item" v-for="option in options" :key="option.value" :value="option.value">
          {{option.text}}
        </option>
      </select>
      <div class="text-content">
        <input type="text" v-model="text" class="text-input" @input="handleTextChange">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TextFilter',
    props: {
      field: {
        type: String
      }
    },
    data() {
      return {
        condition: '', // 条件
        options: [
          {
            text: '=',
            value: 'eq'
          },
          {
            text: '>=',
            value: 'ge'
          },
          {
            text: '<=',
            value: 'le'
          },
          {
            text: '<>',
            value: 'ne'
          },
          {
            text: 'like',
            value: 'like'
          }
        ],
        text: ''
      }
    },
    methods: {
      clearData() {
        this.condition = ''
        this.text = ''
      },
      handleSelectChange() {
        this.handleEmitEvent()
      },
      handleTextChange() {
        this.handleEmitEvent()
      },
      handleEmitEvent() {
        this.$emit('filterChange', {
          dictCode: '',
          field: this.field,
          type: "string",
          rule: this.condition,
          val: this.text
        })
      }
    }
  }
</script>

<style>
.text-filter {
  display: flex;
}
.filter__text {
  padding-right: 5px;
  white-space: nowrap;
}
.text-container {
  flex-grow: 1;
  display: flex;
}
.condition-selector {
  width: 50px;
  outline: none;
  border: 1px solid #aaa;
}
.text-content {
  flex-grow: 1;
  padding-left: 5px;
}
.text-input {
  width: 100%;
  outline: none;
  border: 1px solid #aaa;
  padding: 1px 3px;
}
</style>